<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import router from '@/router'
const store = useUserStore()
// 退出登录
const logout = () => {
  // 处理退出登录逻辑
  store.removeToken()
  store.removeUser()
  router.push('/login')
}
// 路由回退
const onClickLeft = () => history.back()
</script>
<template>
  <van-nav-bar
    :title="contactName"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <div class="my-page">
    <div class="header">
      <img class="avatar" :src="store.user.avatar" alt="头像" />
      <div class="user-info">
        <h2 style="color: #000;" class="username">{{ store.user.nickname }}</h2>
        <p class="status" style="color: green" v-if="store.user.status === 0">
          在线
        </p>
        <p class="status" style="color: gray" v-else="store.user.status === 1">
          离开
        </p>
      </div>
    </div>

    <div class="menu">
      <van-cell
        to="profile"
        title="个人资料"
        icon="user-o"
        class="menu-item"
        is-link
      />
      <van-cell
        to="/my-friend-circle"
        title="朋友圈"
        icon="friends-o"
        class="menu-item"
        is-link
      />
      <van-cell
        @click="logout"
        title="退出登录"
        icon="link-o"
        class="menu-item"
        is-link
      />
    </div>
  </div>
</template>
<style scoped>
.my-page {
  background-color: #f0f0f0;
  height: 100vh;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 1.1em;
  margin: 0;
  color: #000;
}

.status {
  font-size: 0.8em;
  color: #888;
}

.menu {
  margin-top: 20px;
}

.menu-item {
  margin-bottom: 10px; /* 设置每个菜单项之间的间距 */
}
</style>
